<template>
    <u-navbar 
        placeholder 
        height="44px"
    >
        <template #left>
            <view class="align-center">
                <u-icon name="arrow-left" color="#000000" size="22" @click="handleNavigateBack"></u-icon>
                <u-search 
                    placeholder="日照香炉生紫烟" 
                    :showAction="false" 
                    margin="0 0 0 29rpx" 
                ></u-search>
            </view>
        </template>
    </u-navbar>
    <view class="app-container" style="padding-top: 38rpx;">
        <!-- <view class="align-center mb26">
            <i class="iconfont icon-sousuo"></i>
            <text class="font28 weight ml8">搜索指定内容</text>
        </view> -->
        <view class="justify-between mb26">
            <view class="align-center">
                <i class="iconfont icon-lishijilu"></i>
                <text class="font28 weight ml8">历史记录</text>
            </view>
            <u-icon name="trash" color="#9C9C9C" size="20"></u-icon>
        </view>
        <view class="flex-wrap" style="gap: 16rpx; margin-bottom: 50rpx;">
            <view class="record" v-for="item in 8" :key="item">网红美食</view>
        </view>
        <view class="justify-between">
            <view class="align-center">
                <i class="iconfont icon-huati"></i>
                <text class="font28 weight ml8">热门话题</text>
            </view>
            <view class="align-center">
                <text class="font28 grey">展开</text>
                <u-icon name="arrow-down" color="#9C9C9C"></u-icon>
            </view>
        </view>
        <view class="topic-list">
            <view class="align-center mb20" v-for="(item, index) in 5" :key="item">
                <view class="font28 p21 weight" :style="{ color: topicColor[index] || '#EF6500' }">{{ index + 1 }}</view>
                <view class="justify-between topic flex1 dark-gray">
                    <view class="align-center font26">和ChatGPT的有趣对话<i class="iconfont icon-xin" style="color: #F65773;"></i></view>
                    <text class="font22">1100.4w</text>
                </view>
            </view>
        </view>
        <view class="justify-between">
            <view class="align-center">
                <i class="iconfont icon-daohang"></i>
                <text class="font28 weight ml8">热门小区</text>
            </view>
            <view class="align-center">
                <text class="font28 grey">展开</text>
                <u-icon name="arrow-down" color="#9C9C9C"></u-icon>
            </view>
        </view>
        <Residential v-for="item in 10" :key="item" />
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { handleNavigateBack } from '@/plugins/uniApp';
import Residential from '@/components/Residential/index.vue';

const topicColor = ref([
    '#F65773',
    '#EF6500',
    '#EF6500'
])
</script>

<style lang="scss" scoped>
.p21 {
    padding-bottom: 21rpx;
}

.record {
    padding: 11rpx 26rpx;
    background: #F5F5F5;
    border-radius: 12rpx;
    font-size: 22rpx;
    font-weight: 800;
}

.topic {
    margin-left: 38rpx;
    padding-bottom: 21rpx;
    border-bottom: 1rpx solid #F5F5F5;
}

.topic-list {
    padding: 28rpx 0 50rpx;
}
</style>